<template>
	<div>
		<div class="m_head">			
			<a class="prevbtn" @click.prevent="back">	
				<span class="prev rotate45"></span>
				<span class="prev1 rotate135"></span>
			</a>
			<h1 class="navtext">登录</h1>
		</div>
	<div class="form-box">
		<div  id="loginForm">
			<div class="form-group">
				<label>账号</label>
				<input v-model="mobile" ref='phone'  type="text" class="userName " placeholder="请输入账户名或者手机号" name="phone" id="phone" @keyup="show($event)" @keydown="show($event)" />
			</div>
			<div id="usererror" class="error" ref="userErro"></div>
				<div class="form-group">
					<label>密码</label>
					<input v-model="pwd" ref="pwd" type="password" class="passwd" placeholder="请输入密码" @keyup="show($event)" @keydown="show($event)"/>
				</div>
				<div id="passwderror" class="error" ref="pwdErro"></div>
				<div class="form-group">
					<button class="loginbtn formActionBtn" ref="loginBtn" @click="loginAction">登录</button>
				</div>
			</div>				
			<div id="bottom_edit">
				<router-link  class="quickReg" to ="/register">快速注册</router-link>
				<a  class="findPwd">找回密码</a>
			</div>
			<div class="other_login">
				其他登录方式
				<div class="other_loginContent">
				<a href="" class="sina_a"><i class="m_icon"></i><span>新浪微博</span></a>
				<a href="" class="qq_a"><i class="m_icon"></i><span>QQ</span></a>
				<a href="" class="wx_a"><i class="m_icon"></i><span>微信</span></a>
				</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	import api from '../../api/api.js'
	import { Toast } from 'mint-ui'
	import local from '../../local/local.js'
	var verifiedBy =false;
	export default{		
		data(){
			return {
				mobile:'',
				pwd:''
			}
		},
		methods:{
			back(){
				this.$store.state.showBottomTab = true;
				this.$router.go(-1);//返回上一层
			},
			show(e){			
				verifiedBy = true;
				var pval = this.$refs.phone.value.trim();
				var pwdval = this.$refs.pwd.value.trim();
				
				var phonerro = this.phone(pval);
				var pwderro = this.password(pwdval);
				if (phonerro){
		 			this.$refs.userErro.style.display = "block";
		 			this.$refs.userErro.innerText = phonerro;		
			 	}
		 		else {
		 			this.$refs.userErro.style.display = "none";
		 			this.$refs.userErro.innerText = "";		
		 		}		 		
		 		if (pwderro){
		 			this.$refs.pwdErro.style.display = "block";
		 			this.$refs.pwdErro.innerText = pwderro;		
			 	}
		 		else {
		 			this.$refs.pwdErro.style.display = "none";
		 			this.$refs.pwdErro.innerText = "";		
		 		}
		 		
		 		if (pval == '' || phonerro || pwdval =="" || pwderro) verifiedBy = false;
			},
			loginAction(){				
				if(!verifiedBy){
					Toast({
       				 	message: '请检查错误!',
        				position: 'center',
        				duration: 2000
     				});
     				return false;
				}
				var params = {"user_name":this.mobile,"user_password":this.pwd};
				api.login.login(params).then((res)=>{
				console.log(res);					
                if(res.ret == 200){
                    Toast('登录成功');
                    let userData = res.data;
                    this.$router.replace({name:'index',params:{}});
                    this.$store.isLogin = true;
                    this.$store.state.showBottomTab = true;
                    local.setUserInfo(res.data);
//                  this.getQiNiuToken(userData);

                }else{
                    Toast(res.msg);

                }
				})
             	
			}			
		},
		created(){
			this.$store.state.showBottomTab = false;
		},	
	}
//	ref 有三种用法：
//
//　　1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
//
//　　2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
//
//　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
</script>

<style lang="css" scoped>
/*a{text-decoration: none;}*/
.form-box{margin-top: 1rem;padding-top: .5rem; overflow: hidden;}
.form-group{border-radius:.08rem;border: .02rem solid #F0F0F0; width: 5rem;background: #FFFFFF;margin: 0 auto;height: .68rem;margin-bottom: .2rem;}
.form-group>label{vertical-align: top;color: #000;font-size: .2rem;width: .4rem;height: .4rem;line-height: .6rem;margin-left: .2rem;display: inline-block;margin-bottom: .3rem;}
.form-group>input{width: 70%;font-size: .18rem;height: .6rem;margin-left: .03rem;border: none;padding: .02rem;}
.loginbtn{text-align: center;width: 100%;height: 100%;background: #ff5000;font-size: .25rem;color: #ffffff;} 
.formActionBtn{text-align: center;}
.disableBtn{background: rgba(122,123,33,0.5);}
.error{display: none; color: #FF0000;font-size: .2rem;height: .3rem;line-height: .3rem;margin-left: 1.4rem;margin-bottom: .1rem;width: 70%;}
.inputBorder{border-color:#EC971F;}
#bottom_edit a{color: #999;font-size: .25rem; width: 1.2rem;height: 1rem;}
.quickReg{margin-left: 1.3rem;}
.findPwd{margin-left: 1.7rem;}
.other_login{width: 4rem;margin: 0 auto; padding-top: .4rem;}
.other_loginContent{overflow: hidden;}
.other_loginContent a{ float: left;width: 33.333%;height: 2rem;margin-top: .3rem;text-align: center;}
.other_loginContent a span{margin-left: 0rem;margin-top: .3rem;height: .1rem;line-height: .1rem;display: inline-block;margin-right: .4rem;font-size: .2rem;}
.other_loginContent i{ width: .98rem;height: .98rem;display: block;}
.other_loginContent .sina_a i{background-position: .002rem -1.64rem;}
.other_loginContent .qq_a i{background-position: -1.08rem -1.64rem;}
.other_loginContent .wx_a i{background-position: -2.07rem -1.64rem;width: 1.1rem;}
.m_icon{background-image: url('../../images/base.png?1438789004');background-size: 6.9rem 7rem;}
</style>